<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter } from 'vue-router';
import { sseService} from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";
import svgIcon from '@/components/base-svgIcon/index.vue';
import{setUrl} from "@/service/sseUrl";
import Papa from "papaparse";
import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css';//表格样式
import { registerAllModules } from 'handsontable/registry'; // 在线编辑样式
import 'handsontable/languages/zh-CN'; //汉语包
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
registerAllModules();
registerCellType(NumericCellType);
registerPlugin(UndoRedo);

const contentBoxRef = ref(null)
const router = useRouter()
const menuRecord = useMenuRecordStore()

//定义handsontable的ref
const hotTableRef = ref<any>(null);
const settings = ref<any>(
    {
        language: 'zh-CN', // 官方汉化
        licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明

        //colHeaders     
        colHeaders: [
            "病人姓名",
            "病人身份证号",
            "病人类型"
        ],

        //columns        
        columns: [

            {
                data: "病人姓名",
                readOnly: false,
                type: "text",
                dateFormat: null,
                source: null,
                strict: false,
                numericFormat: null
            },
            {
                data: "病人身份证号",
                readOnly: false,
                type: "text",
                dateFormat: null,
                source: null,
                strict: false,
                numericFormat: null
            },
            {
                data: "病人类型",
                readOnly: false,
                type: "text",
                dateFormat: null,
                source: null,
                strict: false,
                numericFormat: null
            }
        ],
        //data
        data: [
            {
                "病人姓名": "测试",
                "病人身份证号": "123456789",
                "病人类型": "贫困户"
            },
            {
                "病人姓名": "张三",
                "病人身份证号": "369258147",
                "病人类型": "贫困户"
            }
        ],
        currentRowClassName: 'currentRow', // 突出显示行
        currentColClassName: 'currentCol', // 突出显示列
        minSpareRows: 2, //行留白
        autoWrapRow: false, //自动换行
        minRows: 2100,
        trimWhitespace: false, //去除空格
        rowHeaderWidth: 100, //单元格宽度
        stretchH: 'all',
        renderAllRows: false,
        rowHeaders: true, // 行标题   布尔值 / 数组/  函数
        formulas: false, //公式
        copyable: true, // 允许键盘复制
        wordWrap: false, // 自动换行
        copyPaste: true, //复制粘贴
        filters: false, //允许通过内置组件或API过滤表数据
        search: false,
        fixedColumnsLeft: 0, // 固定左边列数
        fixedRowsTop: 0, // 固定上边列数
        columnSorting: true, // 排序
        contextMenu: true, //右键菜单
    },
)



onMounted(() => {

});

//see 链接
function sseServiceOpen() {
  console.log(sseService);

  const onopen = () => {
    console.log("建立无敌 sse 连接成功")
  }
  // 建立连接
  let sseChatParams: SSEChatParams = {
    onopen,
    url: setUrl(''),
    onmessage: (event: MessageEvent) => {
      // 收到消息
      console.log('收到消息菜单：', event.data);
    //   let fst = event.data.replace(/\\n/g, "\n")
    //   const meun = Papa.parse(fst, { header: true, delimiter: ";", newline: "\n" })
    //   console.log(meun);

      
    },
    finallyHandler: () => {
      console.log("finallyHandler操作")
    }
  };
  sseService.connect(sseChatParams)


}



</script>
<template>
 <baseCard>

    <hot-table width="100%" height="500" :settings="settings" ref="hotTableRef"></hot-table>

 </baseCard>
</template>

<style src="./index.scss" scoped></style>
